<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      width="30%"
      top="5vh"
      :title="title"
      @close="close"
    >
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        label-width="90px"
        status-icon
      >
        <el-form-item label="设备别名" prop="alias">
          <el-input
            v-model="form.alias"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="设备ID" prop="device_id">
          <el-input
            v-model="form.device_id"
            autocomplete="off"
            :spellcheck="false"
            :disabled="device_idFlag"
          />
        </el-form-item>
        <el-form-item label="楼栋名称" prop="build">
          <el-input
            v-model="form.build"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="所在楼层" prop="storey">
          <el-input
            v-model="form.storey"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="所在位置" prop="location">
          <el-input
            v-model="form.location"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="账户" prop="username">
          <el-input
            v-model="form.username"
            autocomplete="off"
            :spellcheck="false"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            autocomplete="off"
            :spellcheck="false"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input
            v-model.trim="form.lng"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input
            v-model.trim="form.lat"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="是否录像" prop="record">
          <el-radio-group v-model="form.record" class="ml-4">
            <el-radio :label="true" size="large">是</el-radio>
            <el-radio :label="false" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="uuid" prop="uuid">
          <el-input
            v-model="form.uuid"
            autocomplete="off"
            :spellcheck="false"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="码流地址1" prop="rtsp_uri">
          <el-input
            v-model="form.rtsp_uri"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="码流地址2" prop="rtsp_uri1">
          <el-input
            v-model="form.rtsp_uri1"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="码流地址3" prop="rtsp_uri2">
          <el-input
            v-model="form.rtsp_uri2"
            autocomplete="off"
            :spellcheck="false"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { RuleForm } from "@/type/camera";
import { addCamera, editCameraList } from "@/api/camera";
import { ElMessage } from "element-plus";
const dialogFormVisible = ref<boolean>(true);
const ruleFormRef = ref<FormInstance>();
const emit = defineEmits(["closePopUps"]);
const disabled = ref<boolean>(false);
const device_idFlag = ref<boolean>(false);
const title = ref<string>("手动新增摄像头");
const porps = defineProps<{
  formData: RuleForm;
}>();
onMounted(() => {
  if (porps.formData) {
    if (porps.formData?.id) {
      device_idFlag.value = true;
      title.value = "编辑摄像头";
      for (const key in form) {
        form[key] = porps.formData[key];
      }
      form.lat = porps.formData.point.lat;
      form.lng = porps.formData.point.lng;
    } else {
      device_idFlag.value = true;
      disabled.value = true;
      title.value = "新增摄像头";
      for (const key in porps.formData) {
        for (const keys in form) {
          if (keys === key) {
            form[keys] = porps.formData[key];
          }
        }
      }
    }
  }
});

const form = reactive<RuleForm>({
  alias: "",
  device_id: "",
  build: "",
  storey: "",
  location: "",
  username: "",
  password: "",
  lng: 0,
  lat: 0,
  record: true,
  uuid: "",
  rtsp_uri: "",
  rtsp_uri1: "",
  rtsp_uri2: "",
  point: {
    lng: 0,
    lat: 0
  }
});

const close = () => {
  emit("closePopUps");
};

/**新增请求 */
const addAsk = async () => {
  form.point.lat = Number(form.lat);
  form.point.lng = Number(form.lng);
  const res = await addCamera(form);
  if (res.code === 0) {
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    emit("closePopUps", form.uuid);
  } else {
    ElMessage.error(res.message);
  }
};

/**编辑请求 */
const editAsk = async () => {
  form.point.lat = Number(form.lat);
  form.point.lng = Number(form.lng);
  const res = await editCameraList(form);
  if (res.code === 0) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    emit("closePopUps");
  } else {
    ElMessage.error(res.message);
  }
};

/**提交逻辑 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (porps.formData?.id) {
        editAsk();
      } else {
        addAsk();
      }
    }
  });
};

const rules = reactive<FormRules>({
  alias: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  device_id: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
  build: [{ required: true, message: "请输入楼栋名称", trigger: "blur" }],
  storey: [
    { required: true, message: "请输入摄像头所在楼层", trigger: "blur" }
  ],
  location: [
    { required: true, message: "请输入摄像头所在位置", trigger: "blur" }
  ],
  username: [{ required: true, message: "请输入账户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入账户名", trigger: "blur" }],
  record: [
    {
      type: "boolean",
      required: true,
      message: "是否开启录像",
      trigger: "blur"
    }
  ],
  uuid: [
    { required: true, message: "请输入uuid", trigger: "blur" },
    {
      pattern: /^[^\s\u4e00-\u9fa5]*$/,
      message: "不能包含空格与汉字",
      trigger: "blur"
    }
  ],
  rtsp_uri: [
    { required: true, message: "请输入码流地址", trigger: "blur" },
    {
      pattern: /^[^\s\u4e00-\u9fa5]*$/,
      message: "不能包含空格与汉字",
      trigger: "blur"
    }
  ],
  rtsp_uri1: [
    { required: true, message: "请输入码流地址", trigger: "blur" },
    {
      pattern: /^[^\s\u4e00-\u9fa5]*$/,
      message: "不能包含空格与汉字",
      trigger: "blur"
    }
  ],
  rtsp_uri2: [
    {
      pattern: /^[^\s\u4e00-\u9fa5]*$/,
      message: "不能包含空格与汉字",
      trigger: "blur"
    }
  ],
  lng: [
    {
      pattern: /^[-+]?(\d+\.\d*|\.\d+|0)$/,
      message: "请输入正确的经度",
      trigger: "blur"
    }
  ],
  lat: [
    {
      pattern: /^[-+]?(\d+\.\d*|\.\d+|0)$/,
      message: "请输入正确的纬度",
      trigger: "blur"
    }
  ]
});
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  font-weight: 550;
}

::v-deep .el-dialog__body {
  padding: 8px 18px 0;
}
</style>
